<template>
  <div>
    <template v-for="item in list">
      <ul :key="item.id">
        <li style="height: 100px; width: 100px">
          <ImageView :src="item.img" @imgClick="handleImageClick"></ImageView>
          <!-- <img style="width: 100%; height: 100%" :src="item.img" alt="" /> -->
        </li>
        <li>{{ item.name }}</li>
        <li><button @click="handleToCart(item)">加入购物车</button></li>
      </ul>
    </template>
    <!-- <button @click="handleClick">添加数据</button> -->
  </div>
</template>

<script>
// 1. 调用vuex中的接口，
// 2. 将vuex中的state数据拿取过来
export default {
  // 1. 调用vuex中的接口，
  created() {
    // 初始化 vuex中的actions数据接口
    this.$store.dispatch('getCartList', { page: 1, size: 5 })
  },
  // 2. 将vuex中的state数据拿取过来
  computed: {
    list() {
      return this.$store.state.cart.list
    },
  },
  methods: {
    // 图片事件
    handleImageClick() {
      console.log('imgClick')
    },
    // 加入购物车
    handleToCart(item) {
      this.$store.commit('to_cart', item)
    },
    handleClick() {
      this.$store.commit('set_list', {
        id: Date.now(),
        name: 'ipone_' + Date.now(),
      })
    },
  },
}
</script>
